<template>
	<view class="">
		<u-navbar :is-back="true" title="我的账务" back-icon-color="#ffffff" title-color="#ffffff"
			:background="{backgroundColor:'#E62131'}"></u-navbar>
		<view class="atopheig" style="padding: 30rpx 30rpx 60rpx;">
			<view class="lsitreat" v-for="(item,index) in tabList" :key="index">
				<view class="toptitle fliexs space_between">
					<span class="names">{{item.courseName}}</span> <span>余 <span style="color: #E62131;">{{item.residueNum}}</span></span>
				</view>
				<view class="list_btns" @click="isclick(item)">
					课程详情
				</view>
			</view>
		</view>
		<u-modal v-model="show" :title="'课程详情'" :title-style="{fontWeight: 'bold',fontSize: '30rpx'}">
			<view class="slot-content" v-if="objsDetail">
				<div class="lsitas"><span class="names">课程名称</span>{{objsDetail.courseName}}</div>
				<div class="lsitas"><span class="names">购买数量</span>{{objsDetail.courseNum}}课时</div>
				<div class="lsitas"><span class="names">购买金额</span>{{objsDetail.amount}}元</div>
				<div class="lsitas"><span class="names">剩余数量</span>{{objsDetail.residueNum}}课时</div>
				<!-- <div class="lsitas"><span class="names">有效期</span>无</div> -->
				<!-- <span class="spansa"><u-icon name="close-circle-fill" color="#E62131" size="40"></u-icon></span> -->
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				show: false,
				objsDetail:null,

				parms: {
					limit: 10,
					page: 1,
				},
				tabList: [],

			}
		},

		onLoad() {

		},
		onShow() {
			this.sherchList()
		},
		onReady() {

		},
		onReachBottom() {
			this.parms.page += 1
			this.studentworkListApi()
		},
		methods: {
			sherchList() {
				this.parms.page = 1;
				this.tabList = [];
				this.studentworkListApi()
			},
			studentworkListApi() {
				uni.$api.common.studentcourseList(this.parms).then((res) => {
					if (res.count === this.tabList.length && this.tabList.length > 0) {
						uni.showToast({
							title: '没有更多了',
							icon: 'none',
							duration: 2000
						});
					} else {
						res.result.forEach((item) => {
							this.tabList.push(item)
						})
					}
				});
			},
			// 详情
			isclick(item) {
				this.show = true
				this.objsDetail = item
			},
			okllists() {
				uni.navigateTo({
					url: "./classCourse"
				})
			},
			isckickTime(index) {
				this.dateindex = index
				this.showdate = true;
			},
			// 确认时间
			confirmdate(e) {
				if (this.dateindex == 1) {
					this.form.sTime = e.year + '-' + e.month + '-' + e.day
				}
				if (this.dateindex == 2) {
					this.form.eTime = e.year + '-' + e.month + '-' + e.day
				}
			},
			// 搜索
			sherchs() {

			},
			modalClick() {
				this.show = true;
			},
			// 清空
			clichs() {
				this.form = {
					courseName: '',
					coachName: '',
					className: '',
					studentName: '',
					isAttendance: '',
					texts: "",
				};
			},
			// 确定
			oklistTlist() {
				this.tablist = [];
				this.classHours = 0

				this.show = false
			},

			open(index) {
				// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
				// 同时内部会自动给当前展开项进行高亮
				// this.$refs.uDropdown.highlight();
				this.dropDownShow = true;
			},
			close(index) {
				// 关闭的时候，给当前项加上高亮
				// 当然，您也可以通过监听dropdown-item的@change事件进行处理
				// this.$refs.uDropdown.highlight(index);
				this.dropDownShow = false;
			},
			change() {
				// this.parms.page = 1;
				// this.oderList = [];
				// this.oderrList()
				// 更多的细节，如有需要请自行根据业务逻辑进行处理
				// this.$refs.uDropdown.highlight(xxx);
			}
		}
	}
</script>
<style lang="scss">
	.lsitreat {
		padding: 20rpx 30rpx;
		box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
		margin-bottom: 30rpx;
		border-radius: 20rpx;

		.toptitle {
			padding: 20rpx 0;

			.names {
				font-weight: bold;
			}
		}

		.list_btns {
			border-top: 1rpx solid #e1e1e1;
			text-align: center;
			padding: 20rpx 0;
			color: #2b85e4;
		}
	}

	.slot-content {
		padding: 20rpx 30rpx 40rpx;
		position: relative;

		.lsitas {
			line-height: 60rpx;

			.names {
				padding-right: 20rpx;
				color: #b1b1b1;
			}
		}

		.spansa {
			display: inline-block;
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			bottom: -100rpx;
			left: 0;
			right: 0;
			margin: auto;
		}
	}
</style>